<template>
  <div>
    <div >
      时间段：
      <el-select  placeholder="请选择">
          <el-option label="是" value="Y"> </el-option>
          <el-option label="否" value="N"></el-option>
      </el-select>
    </div>

    <div style="width: 49%;float: left">
      <ve-funnel :data="chartData" :settings="chartSettings"></ve-funnel>
    </div>
   <div style="width: 49%;float: right">
     <avue-crud :option="option"
                :table-loading="loading"
                :data="data"
                ref="crud"
                @search-change="searchChange"
                @on-load="onLoad">
     </avue-crud>
   </div>
  </div>
</template>

<script>
  import {getList} from "@/api/coreBoard/marketingconversion";
  import {mapGetters} from "vuex";

  export default {

    data() {
      this.chartSettings = {
        dimension: '状态1',
        metrics: '数值'
      }
      return {
        chartData: {
          columns: ['状态', '状态1', '数值'],
          rows: [
            {'状态': '展示', '状态1': '展示1', '数值': 900},
            {'状态': '访问', '状态1': '访问1', '数值': 600},
            {'状态': '点击', '状态1': '点击1', '数值': 300},
            {'状态': '订单', '状态1': '订单1', '数值': 100}
          ]
        },
        loading: true,
        selectionList: [],
        option: {
          height: 'auto',
          calcHeight: 30,
          border: true,
          column: [
            {
              label: "指标名称",
              prop: "taskName",
            },
            {
              label: "值",
              prop: "taskUserNum",
            },
          ]
        }
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    methods: {
      searchChange(params, done) {
        this.query = params;
        this.onLoad( params);
        done();
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
</style>
